<template>
  <div v-if="parentButton.length !== 0">
    <div style="display: flex">
      <span v-for="item in parentButton" :key="item.ButtonKey">
        <el-badge value="无权限,可授权" class="item" v-if="item?.IsDisabled">
          <el-tooltip
            :visible="visible"
            content="请到OverallAuth2.0 统一授权中心授权"
            effect="customized"
          >
            <el-button
              @mouseenter="visible = true"
              @mouseleave="visible = false"
              :key="item.ButtonKey"
              :type="item?.Color === '' ? item?.Types : ''"
              :size="item?.Size"
              :text="item?.IsText"
              :round="item?.IsRound"
              :plain="item?.IsPlain"
              :circle="item?.IsCircle"
              :color="item?.Color"
              :disabled="item?.IsDisabled"
              @click="openPage(item.ButtonKey)"
              style="margin-left: 10px"
            >
              <template #icon v-if="item?.Icon !== ''">
                <el-icon :color="item?.TextColor">
                  <component class="icons" :is="item?.Icon"></component>
                </el-icon>
              </template>
              <span :style="{ color: item?.TextColor }">{{ item.ButtonName }}</span>
            </el-button>
          </el-tooltip>
        </el-badge>
        <el-button
          v-if="!item?.IsDisabled"
          :type="item?.Color === '' ? item?.Types : ''"
          :size="item?.Size"
          :text="item?.IsText"
          :round="item?.IsRound"
          :plain="item?.IsPlain"
          :circle="item?.IsCircle"
          :color="item?.Color"
          :disabled="item?.IsDisabled"
          @click="openPage(item.ButtonKey)"
          style="margin-left: 10px"
        >
          <template #icon v-if="item?.Icon !== ''">
            <el-icon :color="item?.TextColor">
              <component class="icons" :is="item?.Icon"></component>
            </el-icon>
          </template>
          <span :style="{ color: item?.TextColor }">{{ item.ButtonName }}</span>
        </el-button>
      </span>
      <div style="margin-left: 10px; align-items: center; display: flex">
        <el-tooltip
          class="box-item"
          effect="dark"
          content="点击查看帮助文档"
          placement="right-start"
        >
          <el-icon
            style="cursor: pointer"
            size="20"
            color="blue"
            @click="dialogVisible = true"
          >
            <QuestionFilled />
          </el-icon>
        </el-tooltip>
      </div>
      <el-drawer size="1600" v-model="dialogVisible" title="帮助中心">
        <template #title>
          <div style="font-size: 26px; color: black; font-weight: 700">帮助中心</div>
        </template>
        <iframe :src="helperRoute" width="100%" height="100%" frameborder="0"></iframe>
      </el-drawer>
    </div>
  </div>
  <div v-else>当前菜单不存在按钮</div>
</template>

<script lang="ts">
import { getMenuButtonAuthList } from "@/api/overallAuthApi";
import { GetParamUrl } from "@/api/publicTool";
import { helperUrl } from "@/api/requestAddress";
import { ButtonRoleTypeEnum } from "@/enum/public";
import { SystemKey } from "@/model/const";
import { SysButtonDataOutPut } from "@/model/public/public";
import { ElMessage } from "element-plus";
import { defineComponent, onMounted, PropType, ref } from "vue";
export default defineComponent({
  props: {
    model: {
      type: Object as PropType<any>,
      //   required: true,
    },
    helperPath: { type: String, required: true },
  },

  setup(props, context) {
    const helperRoute = ref<string>(helperUrl + props.helperPath);
    const parentButton = ref<SysButtonDataOutPut[]>([]);
    const dialogVisible = ref<boolean>(false);
    const visible = ref(false);
    //初始化数据
    onMounted(() => {
      getButtonByMenuMsg();
    });

    //获取按钮样式
    const getButtonByMenuMsg = async () => {
      var menuId = GetParamUrl("MenuId");
      getMenuButtonAuthList({
        menuId: menuId,
        buttonRoleType: ButtonRoleTypeEnum.MenuButton,
         systemKey: SystemKey,
      }).then(({ data, code, msg }) => {
        if (code == 200) {
          parentButton.value = data;
        } else {
          ElMessage({
            message: msg,
            type: "warning",
          });
        }
      });
    };

    const openPage = function (row: string) {
      context.emit(row, props.model);
    };
    return {
      openPage,
      parentButton,
      dialogVisible,
      helperUrl,
      helperRoute,
      visible,
    };
  },
  components: {},
});
</script>
<style scoped>
::v-deep .el-badge__content {
  transform: translateY(-70%) translateX(0%) !important;
  /* 调整位置 */
}
</style>
